<template> 
    <div>
        <Button type="primary" style="margin-bottom:10px;" @click="addbanner(1)">增加</Button>
        <Table border :columns="columns12" :data="data6" >
            <template slot-scope="{ row,column,index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(row,column,index )">修改</Button>
                <Button type="error" size="small" @click="remove(row,column,index )">删除</Button>
            </template>
        </Table>
        <Page :total="total" v-if="total" :page-size="limit" :current="showpage" @on-change="pagechange" style="margin-top:20px;"/>
        <div>
            <Modal
                v-model="modal1"
                :title="changtitle"
                @on-ok="addtwosub"
                width="800px" 
                :mask-closable="false"
                :zIndex="4" style="top:20px;">
                <Form ref="formCustom" :model="formCustom"  :label-width="80" >
                    <FormItem label="名称" >
                        <Input type="text" v-model="formCustom.Title" />
                    </FormItem>
                    <FormItem label="简介" >
                        <Input type="text" v-model="formCustom.Sumary" />
                    </FormItem>
                    <FormItem label="来源" >
                        <Input type="text" v-model="formCustom.Source" />
                    </FormItem>
                    <FormItem label="链接(会议报名)" >
                        <Input type="text" v-model="formCustom.Link" />
                    </FormItem>
                    <FormItem label="时间" >
                        <Row >
                            <Col span="12">
                                <DatePicker type="date"  placement="top" v-model="formCustom.UpdataTime" @on-change="getval" placeholder="选择时间" style="width: 200px"></DatePicker>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="内容">
                        <UE v-if="modal1" :defaultMsg="val" :config="config" ref="ue"></UE>
                    </FormItem>
                    <FormItem label="图片上传" >
                        <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="204800"
                            multiple
                            type="drag"
                            action="/admin/upload"
                            style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <div v-if="formCustom.Picture" class="ishovs" style="position:relatice;vertical-align:top;width:200px;display:inline-block;border:1px solid #ccc;margin-left:10px;">
                            <img :src="formCustom.Picture" style="width:190px;">
                            <div class="demo-upload-list-cover" style="font-">
                                <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                            </div>
                        </div>
                        <Modal title="View Image" v-model="visible">
                            <img :src="formCustom.Picture" v-if="visible" style="width: 100%">
                        </Modal>
                    </FormItem>
                    <FormItem label="排序">
                        <Input type="text" v-model="formCustom.Sort" />
                    </FormItem>
                    <FormItem label="其他模块展示">
                        <Cascader :data="data2" v-model="formCustom.SecondName" @on-change="xuanze"></Cascader>
                    </FormItem>
                    <FormItem label="展示形式">
                        <RadioGroup v-model="formCustom.Type">
                            <Radio :label="0">文本</Radio>
                            <Radio :label="1">图文</Radio>
                            <!-- <Radio :label="2">链接跳转</Radio> -->
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="是否首页显示">
                        <RadioGroup v-model="formCustom.IsIndex">
                            <Radio :label="0">不显示</Radio>
                            <Radio :label="1">显示</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="是否显示">
                        <RadioGroup v-model="formCustom.IsDisplay">
                            <Radio :label="0">不显示</Radio>
                            <Radio :label="1">显示</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>

<script>
import UE from './ue.vue';
    export default {
        components: {
            UE
        },
        props:{
            names:String,
            datalist:Array,
            lists:Array,
        },
        data(){
            return{
                val:'',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                SeondNameval:['13','26','30'],
                modal1:false,
                changtitle:'添加banner',
                formCustom:{
                    Title:'',
                    Sort:1,
                    IsIndex:1,
                    IsDisplay:1,
                    Picture:'',
                    Link:'',
                    Sumary:'',
                    Content:'',
                    Source:'',
                    UpdataTime:'',
                    Type:0,
                    FrId:1,
                    SecondFrId:0,
                    SecondName:[]
                },
                columns12: [
                    {
                        title: '名称',
                        key: 'Title',
                        value:'11111'
                    },
                    {
                        title: '链接',
                        key: 'Link',
                         value:'2222'
                    },
                    {
                        title: '排序',
                        key: 'Sort',
                         value:'33333'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data2: [
                    {
                        value: '0',
                        label: '不复制',
                    },
                    {
                        value: '1',
                        label: '新闻动态',
                    },
                    {
                        value: '2',
                        label: '人才培养',
                    },
                    {
                        value: '3',
                        label: '产业发展',
                    },
                    {
                        value: '4',
                        label: '产教融合',
                    },
                    {
                        value: '5',
                        label: '安全科普',
                    }
                ],
                data6: [
                ],
                visible: false,
                thistype:1,
                total:0,
                showpage:1,
                limit:8
            }
        },
        mounted() {
            this.formCustom.FrId = this.names;
            this.showlist();
            this.datalist.forEach((item,index)=>{
                if(item.length){
                    var newitem = {
                        value:this.lists[index].id.toString(),
                        label:this.lists[index].Name,
                        children:[]
                    };
                    if(item.length>0){
                        item.forEach((item1,index1)=>{
                            newitem.children.push({
                                value:item1.a.id.toString(),
                                label:item1.a.Name,
                                children:[]
                            })
                            if(item1.b.length>0){
                                item1.b.forEach((item2,index2)=>{
                                    newitem.children[index1].children.push({
                                        value:item2.id.toString(),
                                        label:item2.Name,
                                        children:[]
                                    })
                                })
                            }
                        })
                    }
                    this.data2.push(newitem)
                }else{
                    this.data2.push({
                        value:this.lists[index].id.toString(),
                        label:this.lists[index].Name
                    })
                }
                
            })
        },
        methods: {
            xuanze(value,selectedData){
                this.formCustom.SecondFrId = selectedData[selectedData.length-1].value;
                this.formCustom.SecondName=value;
            },
            getval(data1,data2){
                this.formCustom.UpdataTime = data1.toString();
            },
            getUEContent() {
                this.formCustom.Content = this.$refs.ue.getUEContent();
            },
            pagechange(page){
               this.showpage = page;
               this.showlist()
           },
           addbanner(type){
               this.modal1 = true;
               this.thistype=type
               if(type == 1){  //添加
                    this.changtitle='添加新闻';
               }else{
                   this.changtitle='修改新闻';
               }
           },
           addtwosub(){
               let that = this
               this.getUEContent()
               if(this.thistype == 1){
                   this.$axios.post('/admin/news/addlist',{...this.formCustom}).then(res=>{
                       if(res.data.ret){
                            this.$Notice.success({
                                title: '新增成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '新增失败'
                            })
                            return false;
                        }
                   })
               }else{
                   this.formCustom.dd = typeof this.formCustom.UpdataTime
                   if(typeof this.formCustom.UpdataTime != 'string'){
                       
                       var d = this.formCustom.UpdataTime;  
                       this.formCustom.UpdataTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;
                   }
                   console.log(this.formCustom.UpdataTime)
                   this.$axios.post('/admin/news/update',{...this.formCustom}).then(res=>{
                       if(res.data.ret){
                            this.$Notice.success({
                                title: '修改成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '修改失败'
                            })
                            return false;
                        }
                   })
               }
           },
           show(row){
               
               this.modal1 = true;
               this.changtitle='修改banner';
               this.thistype=2
               this.formCustom = row;
               this.val = row.Content
               this.formCustom.SecondName=this.formCustom.SecondName.split(',')
           },
           remove(row){
               this.$axios.post('/admin/news/del',{id:row.id}).then(res=>{
                   if(res.data.ret){
                            this.$Notice.success({
                                title: '删除成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '删除失败'
                            })
                            return false;
                        }
               })
           },
           handleView () {
                this.visible = true;
            },
            handleRemove () {
                this.formCustom.Picture=''
            },
            handleSuccess (response, file, fileList) {
                this.formCustom.Picture = '/'+response.data.path
            },
            showlist(){
                this.$axios.post('/admin/news/show',{FrId:this.formCustom.FrId,offset:(this.showpage-1)*this.limit,limit:this.limit}).then(res=>{
                    if(res.data.ret){
                        this.data6 = res.data.data;
                        this.total = res.data.total;
                        if(this.total/this.limit <= this.showpage-1){
                            this.showpage=this.showpage-1;
                            this.showlist()
                        }
                    }
                })
            }
        },
        watch: {
            modal1(){
                if(this.modal1){
                    if(this.thistype==1){
                        this.formCustom.Title = ''
                         this.formCustom.Picture = ''
                          this.formCustom.Content = ''
                          this.formCustom.Sumary = ''
                         this.formCustom.Link = ''
                          this.formCustom.Source = ''
                          this.formCustom.UpdataTime = ''
                          this.formCustom.SecondName = []
                           this.formCustom.SecondFrId = 0
                    
                    }
                }
            }
        },
    }
</script>

<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
  .ivu-modal{
      top:20px !important;
  }
  .ivu-picker-panel-body{
      z-index:100000 !important;
  }
  #edui1_toolbarbox{}
  .ivu-select-dropdown{
      z-index:100000 !important;
  }
</style>
